<template>
  <view class="grid-wrap">

    <view class="top_bg"
    ><image
      src="http://haolei-shenche.oss-cn-beijing.aliyuncs.com/index_bg_top.png"
      mode=""
    ></image
    ></view>
    <view class="content-wrap">
      <view class="card">
        <view class="msg">
          <view class="open-data"><open-data type="userAvatarUrl"></open-data
          ></view>
          <view
            class="text">
            <view class="name"><open-data type="userNickName"></open-data></view>
            <view class="tell">{{ userInfo.mobile }}</view>
          </view>
        </view>
      </view>
      <view class="bottomlist">
        <view class="list" @click="$utils.jumpToOtherPage(orderJumpUrl)" v-if="$auth.checkPerm('order:order:list')">
          订单管理
          <u-icon class="arrow" name="arrow-right" color="#fff"></u-icon>
        </view>
        <view class="list" @click="$utils.jumpToOtherPage(driverJumpUrl)" v-if="$auth.checkPerm('driver:driver:list')">
          司机管理
          <u-icon class="arrow" name="arrow-right" color="#fff"></u-icon>
        </view>
        <view class="list" @click="$utils.jumpToOtherPage(memberJumpUrl)" v-if="$auth.checkPerm('member:member:list')">
          会员管理
          <u-icon class="arrow" name="arrow-right" color="#fff"></u-icon>
        </view>
        <view class="list" @click="$utils.jumpToOtherPage(stationJumpUrl)" v-if="$auth.checkPerm('station:station:list')">
          检测站管理
          <u-icon class="arrow" name="arrow-right" color="#fff"></u-icon>
        </view>
        <view class="list" @click="$utils.jumpToOtherPage(chartJumpUrl)" >
          统计报表
          <u-icon class="arrow" name="arrow-right" color="#fff"></u-icon>
        </view>
        <view class="list" @click="$utils.jumpToOtherPage(zzJumpUrl)" >
          增值服务
          <u-icon class="arrow" name="arrow-right" color="#fff"></u-icon>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { mapGetters } from 'vuex';

export default {

  computed: {
    ...mapGetters(['userInfo']),
  },
  onShow() {
    this.onClMemberLogin();
  },
  data() {
    return {
      loginFlag: false,
      height: '100%',
      tabIndex: 0,
      current: 0,
      orderJumpUrl: {
        jumpUrl: '/pages/order/index',
        // 是否是tabBar
        isTabbar: false,
      },
      memberJumpUrl: {
        jumpUrl: '/pages/member/index',
        // 是否是tabBar
        isTabbar: false,
      },
      driverJumpUrl: {
        jumpUrl: '/pages/driver/index',
        // 是否是tabBar
        isTabbar: false,
      },
      stationJumpUrl: {
        jumpUrl: '/pages/station/index',
        // 是否是tabBar
        isTabbar: false,
      },
      chartJumpUrl: {
        jumpUrl: '/pages/chart/index',
        // 是否是tabBar
        isTabbar: false,
      },
      zzJumpUrl: {
        jumpUrl: '/pages/zz/index',
        // 是否是tabBar
        isTabbar: false,
      },
    };
  },
  methods: {

    onClMemberLogin() {
      this.$nextTick(() => {
        this.$auth.weixinLogin({
          success: () => {
            this.loginFlag = true;
          },
          fail: () => {
            this.utils.jumpToOtherPage({
              jumpUrl: '/pages/login/index',
            });
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.grid-wrap {
  width: 100%;
  height: 100vh;
  overflow-y: hidden;
  /*background-color: #2a3a52;*/
  .grid-text {
    font-size: 28rpx;
    margin-top: 4rpx;
    color: $u-type-info;
  }
  .msg-item {
    display: flex;
    height: 124rpx;
    align-items: center;
    color: #fff;
  }

  .msg-title {
    flex: 1;
    margin: 0 8rpx 0 30rpx;
    font-size: 28rpx;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .red-dot {
    align-content: right;
    width: 18rpx;
    height: 18rpx;
    border-radius: 18rpx;
    background-color: #ff4848;
  }

  /deep/ .mescroll-empty .empty-tip {
    color: #fff;
  }

  .name {
    /* height: 50rpx; */
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4e6792;
  }
  .text {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #94a1b8;

    button {
      background-color: transparent;
      text-align: right;
      padding: 0;
    }
  }
  background: #2a3a52;
  min-height: 100vh;
  position: relative;
  .content-wrap {
    width: 100%;
    /* margin: 0 auto; */
    position: absolute;
    top: 50rpx;
  }
  .top_bg {
    image {
      width: 100%;
      height: 371rpx;
    }
  }
  .card {
    margin: 0 25rpx;
    /* width: 100%; */
    background: #ffffff;
    border-radius: 20rpx;
    padding: 40rpx 30rpx;
    .msg {
      height: 190rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .open-data {
        display: block;
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
        overflow: hidden;
      }
      .text {
        /* float: right; */
        text-align: right;
        button::after {
          border: none;
          color: #4e6792;
          font-weight: 500;
          font-size: 36rpx;
        }
      }
    }
    .tablist {
      margin: 0 auto;
      padding-top: 44rpx;
      height: 200rpx;
      display: flex;
      &-button {
        position: absolute;
        right: 0;
        width: 30%;
        height: 160rpx;
        background: transparent;
        ::after {
          border: none;
        }
      }
      button::after {
        border: none;
      }
      .list {
        flex: 1;
        text-align: center;
        image {
          width: 114rpx;
          height: 114rpx;
        }
        .text {
          // margin-top: 20rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #4e6792;
          line-height: 26rpx;
        }
      }
    }
  }
  .bottomlist {
    padding: 0 20px 40rpx;
    margin-top: 40rpx;
    background: #2a3a52;

    .list {
      color: #fff;
      line-height: 99rpx;
      border-bottom: 1px solid #4c6288;

      font-size: 35rpx;
      image {
        position: relative;
        top: 8rpx;
        width: 39rpx;
        height: 39rpx;
        margin-right: 20rpx;
      }
      .arrow {
        float: right;
        margin-top: 40rpx;
      }
    }
  }
  .tab_my .title {
    opacity: 1;
  }

  .haibao-content {
    /* background-color: #4e6792;
    width: 70%;
    height: 70%;
    margin-left: 15%;
    padding-top: 10%; */
    width: 100%;
    height: 100%;
    position: relative;
  }

  .share-img {
    width: 520rpx;
    height: 840rpx;
    margin-top: 80rpx;
    margin-left: calc((100vw - 520rpx) / 2);
  }

  .bottom-wrap {
    background-color: #fff;
    display: flex;
    width: 100%;
    height: 200rpx;
    align-content: center;
    position: absolute;
    bottom: 0;
    border-radius: 40rpx 40rpx 0rpx 0rpx;

    .bottom-wrap-item {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .ico-url {
        width: 98rpx;
        height: 98rpx;
        background: #a4c0e5;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 56rpx;
          height: 56rpx;
        }
      }

      .ico-save {
        width: 98rpx;
        height: 98rpx;
        background: #fdceaf;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 56rpx;
          height: 56rpx;
        }
      }

      .tablist-button {
        width: 80rpx;
        height: 100%;
        position: absolute;
        background-color: transparent;
      }
      button::after {
        border: none;
      }
    }

    image {
      width: 70rpx;
      height: 70rpx;
    }
    .bottom-desc {
      color: #000;
    }
  }

  .middle-mask {
    width: 80%;
    margin-left: 10%;
    padding-left: 50rpx;
    height: 335rpx;
    background: #ffffff;
    border-radius: 20rpx;
    position: relative;
    top: 35%;

    &-title {
      padding-top: 50rpx;
      margin-bottom: 10rpx;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    &-itemcontent {
      display: flex;
    }

    &-desc {
      width: 390rpx;
      height: 52rpx;
      line-height: 52rpx;
      padding-left: 12rpx;
      background: #ffffff;
      border: 1px solid #c7c7c7;
      border-radius: 8rpx;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &-btn {
      margin-left: 25rpx;
      height: 52rpx;
      min-width: 110rpx;
      line-height: 52rpx;
      text-align: center;
      font-size: 22rpx;
      font-weight: 400;
      color: #fff;
      background: #435a86;
      border-radius: 8rpx;
    }
  }
}
</style>
